<template>

	<div>
		<div class="container-hd">
			<div class="scroller-hd">{{name}}</div>
			<button :style="{ backgroundColor: bgColor }" class="btn-next" @click="begCall"
				:disabled="isDisabled">开始点名</button>
			<div class="auto-names" @click="open">自定义名单>></div>
		</div>
	</div>
</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		ref,
		computed
	} from 'vue';
	const isDisabled = ref(false);
	//	var bgColor=ref('#5882cf');
	const name = ref('马 上 开 始 !')
	var names = ['颤三', '里斯', '王五', '玛丽', '熔丝'];
	var tmp = '';
	var localNms = localStorage.getItem("call-name");
	console.log("lc-nms:"+localNms);
	if (null!=localNms && localNms.length>0) {
		names = localNms.split(",");
	}

	function begCall() {
		isDisabled.value = true;
		const timer = setInterval(function() {
			const rad = Math.floor(Math.random() * names.length);
			console.log(rad);
			console.log("names----" + names);
			name.value = names[rad];
		}, 300);
		setTimeout(function() {
			clearInterval(timer);
			isDisabled.value = false;
		}, 6000);
	}
	const bgColor = computed(() => {
		return isDisabled.value ? '#c1c1c1' : '#5882cf';
	});
	const open = () => {
		console.log(localNms);
		ElMessageBox.prompt('每个名字按空格分开，如：张三 李四 王五', '自定义名单', {
				confirmButtonText: '提交',
				cancelButtonText: '取消',
				inputErrorMessage: '请输入名单后提交',
				inputType: "textarea",
				inputValue:localNms ? localNms.replaceAll(/\,/g,' '):'',
			})
			.then(({
				value
			}) => {
				tmp = value;
				names = tmp.split(" ");
				names = names.filter(item => item.trim() !== '');
				localNms = names.join();
				localStorage.setItem("call-name", names);
				console.log(names);
				ElMessage({
					type: 'success',
					message: `名单已提交`,
				})
			})
			.catch((err) => {
				console.log(err);
				ElMessage({
					type: 'info',
					message: '请输入名单后提交',
				})
			})
	}
</script>

<style>
	.btn-next {
		margin-top: 50px;
		border-radius: 10px;
		padding: 5px 15px;
		color: #f7f7f7;
		border: none;
		background: #5882cf;
		width: 100px;
	}

	.container-hd {
		height: 200px;
		/* border: 1px solid #6d70d1; */
		/* margin: 20px; */
		/* border-radius: 40px; */
		text-align: center;
		/* background-color: #f1f1f1; */
		position: relative;
	}

	.scroller-hd {
		vertical-align: middle;
		margin-top: 10%;
		height: 50px;
		line-height: 50px;
		color: #04acffb5;
		font-size: 28px;
	}

	.auto-names {
		position: absolute;
		right: 0px;
		bottom: 10px;
		font-size: 12px;
		color: #918d8d;
		text-decoration: underline;
	}
</style>